<template>
  <button @click="message='你好啊，李银河！'">修改message</button>
  <button @click="info.name='kobe'">修改info</button>
  <button @click="info.friend.name='jie'">修改info</button>
</template>

<script>
import {reactive, ref, watch} from "vue";

export default{
  setup(){

    const message=ref("Hello World")

    const info=reactive({
      name:'why',
      age:18,
      friend:{
        name: 'ding'
      }
    })

    watch(message,(newValue,oldValue)=>{ // 参数1：要侦听的数据 参数2：参数1变化时的回调函数
      console.log(newValue,oldValue)
    })

    // watch(info,(newValue,oldValue)=>{ // 默认是深度侦听
    //   console.log(newValue,oldValue) // => {name: 'kobe', age: 18},{name: 'kobe', age: 18} 底层指向是同一个proxy对象(想要得到普通的对象看下面的watch代码块)，所以控制台输出的oldValue.name也是kobe。如果想让它不一样，可以深拷贝。
    //   console.log(newValue===oldValue) // true
    // })

    // watch(info,(newValue,oldValue)=>{
    //   //   console.log(newValue,oldValue)
    //   //   console.log(newValue===oldValue) // true
    // },{
    //   immediate:true
    // })

    // 此时参数1是一个函数，并且被执行。执行这个函数的时候会看一下都有哪些依赖，发现依赖info，当info发生变化时就会执行参数2回调函数，同时返回值是一个普通对象
    watch(()=>({...info}),(newValue,oldValue)=>{
      console.log(newValue,oldValue) // => {name: 'why', age: 18, friend: Proxy(Object)},{name: 'why', age: 18, friend: Proxy(Object)}
      console.log(newValue===oldValue) // false
    },{ // 参数1写成上面那种形式时，这里的参数3也必须这么写
      immediate:true,
      deep:true
    })
    return {
      message,
      info
    }
  }
}
</script>